<template>
  <slot />
  <div class="container" :style="style">
    <!-- 左布局 -->
    <el-row :gutter="10" v-if="props.layout === 'left'">
      <el-col :xs="24" :sm="24" :md="24" :lg="18">
        <slot name="left" />
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="6">
        <slot name="right" />
      </el-col>
    </el-row>
    <!-- 右布局 -->
    <el-row :gutter="10" v-if="props.layout === 'right'">
      <el-col :xs="24" :sm="24" :md="24" :lg="6">
        <slot name="left" />
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="18">
        <slot name="right" />
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  layout: {
    type: String,
    default: "left"
  },
  marginTop: {
    type: Number,
    default: 0
  }
});
const style ={
  marginTop: props.marginTop + "px"
};
</script>

<style scoped lang="scss">
</style>